import { useEffect } from "react";
import { Link } from "react-router-dom";
import styles from "./index.module.scss";

const HERO_IMAGE =
  // Green trees themed, no people
  "/landing-hero.jpg";

const LandingPage = () => {
  useEffect(() => {
    document.title = "伊克昭儿童在线 · 首页";
  }, []);

  return (
    <div className={styles.landing}>
      <div className={styles.topbar}>
        <Link to="/" className={styles.brand} aria-label="伊克昭儿童在线">
          伊克昭儿童在线
        </Link>
        <Link to="/login" className={styles.login}>
          登录
        </Link>
      </div>

      <div
        className={styles.hero}
        style={{ backgroundImage: `url(${HERO_IMAGE})` }}
      >
        <div className={styles.heroMask}></div>
        <div className={styles.heroText}>
          <div className={styles.heroTitle}>
            <img
              className={styles.heroLogo}
              src="/logo-ykz.jpg"
              alt="伊克昭幼儿园 Logo"
            />
            伊克昭幼儿园在线
          </div>
          <div className={styles.heroSub}>一切为了孩子的终生发展和幸福奠基</div>
        </div>
      </div>

      <div className={styles.grid}>
        <Link to="/library" className={`${styles.card} ${styles.c1}`}>
          <div className={styles.cardTitle}>课程资源库</div>
          <svg className={styles.cardIcon} width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <g stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
              {/* stack of books */}
              <rect x="4" y="4" width="16" height="3.5" rx="1.2"></rect>
              <path d="M6 5.75H12.5"></path>
              <rect x="4" y="9.25" width="16" height="3.5" rx="1.2"></rect>
              <path d="M6 11H13.5"></path>
              <rect x="4" y="14.5" width="16" height="3.5" rx="1.2"></rect>
              <path d="M6 16.25H12"></path>
              {/* bookmark */}
              <path d="M18 4v5.2l-1.6-0.9-1.6 0.9V4"></path>
            </g>
          </svg>
        </Link>
        <Link to="/teacher-support" className={`${styles.card} ${styles.c2}`}>
          <div className={styles.cardTitle}>教师专业支持</div>
          <svg className={styles.cardIcon} width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <g stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
              {/* graduation cap */}
              <path d="M3 9l9-4 9 4-9 4-9-4z"></path>
              <path d="M7 11.5v3.2c0 1.2 2.9 2.3 5 2.3s5-1.1 5-2.3v-3.2"></path>
              <path d="M21 10v4"></path>
              <circle cx="21" cy="15" r="0.9" fill="currentColor"></circle>
            </g>
          </svg>
        </Link>
        <Link to="/home-education" className={`${styles.card} ${styles.c3}`}>
          <div className={styles.cardTitle}>家园共育资源库</div>
          <svg className={styles.cardIcon} width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <g stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
              {/* home */}
              <path d="M5 21V10l7-7 7 7v11H5z"></path>
              {/* heart */}
              <path d="M12 12.8c.6-.7 1.3-1.3 2.2-1.3 1.1 0 2 .9 2 2 0 1.8-2.1 3-4.2 4.5-2.1-1.5-4.2-2.7-4.2-4.5 0-1.1.9-2 2-2 .9 0 1.6.6 2.2 1.3z"></path>
            </g>
          </svg>
        </Link>
        <Link to="/child-development" className={`${styles.card} ${styles.c4}`}>
          <div className={styles.cardTitle}>儿童发展平台</div>
          <svg className={styles.cardIcon} width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <g stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
              {/* growth bars */}
              <path d="M4 20V14"></path>
              <path d="M9 20v-6"></path>
              <path d="M14 20v-3"></path>
              <path d="M19 20v-9"></path>
              {/* upward arrow */}
              <path d="M4 12l4-4 4 3 6-6"></path>
              <path d="M18 5h3v3"></path>
            </g>
          </svg>
        </Link>
      </div>

    </div>
  );
};

export default LandingPage;


